<div class="page-wrapper">

    <div class="header">
        <div class="left"><i class="icon-back"></i>台桌</div>
        <div class="title">A11桌(5人)</div>
        <!--<div class="right"><i class="icon-book"></i>(<span class="total">4</span>)</div>-->
    </div>

    <div class="menu-body">
        <div class="category-wrapper">
            <ul class="category">
            </ul>
        </div>

        <div class="menu-wrapper">
            <div class="menu-list">
                <div id="repeat-menu-item" style="display: none" class="menu-item" menu-id=${menu.id} menu-name=${menu.name} menu-price=${menu.unitPrice}">
                    <div class="thumb" style="background-image: url(/img/wxy.jpeg);"></div>
                    <div class="menu-right">
                        <div class="menu-name">天目湖剁椒鱼头</div>
                        <div class="line">
                            <div class="price">78</div>
                            <div class="menu-operation">
                                <i class="icon-minus minus"></i>
                                <span class="count">0</span>
                                <i class="icon-add add"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="cart-wrapper">
            <div class="cart-bottom-line">
                <span id="cart" class="left-cart icon-cart"><span id="cart-count" class="cart-count">0</span></span>
                <span id="cart-price" class="cart-price">￥0</span>
                <button id="book" class="btn cart-book">下单</button>
            </div>
        </div>

        <div class="food-list-wrapper">
            <div class="food-list">
                <div class="food-header">
                    <div class="food-header-left">购物车</div>
                    <div id="clear" class="food-header-right icon-remove"></div>
                </div>
                <div class="wrapper">
                    <div id="repeat-food-item" class="food-item" style="display: none;">
                        <span class="food-name"></span>
                        <div class="food-line">
                            <span class="price"></span>
                            <div class="menu-operation">
                                <i class="icon-minus minus"></i>
                                <span class="count"></span>
                                <i class="icon-add add"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <script>
        (function(){
            'use strict';
            var cart = new Cart();
            var $cartCount = $('#cart-count');
            var $cartPrice = $('#cart-price');

            getCategory(window.storeId);

            updateCartMessage();

            function updateCartMessage(){
                var price = cart.getPrice();
                var count = cart.getCount();
                setCartCount(count);
                setCartPrice(price);
            }

            function setCartCount(text){
                $cartCount.text(text);
            }

            function setCartPrice(text){
                $cartPrice.text('￥' + text);
            }

            $('.food-list-wrapper').click(function (event) {
                console.log(event);
                if(event.target == this){
                    $(this).hide();
                }
            });

            $('#clear').click(function(){
                var foods = cart.getOrder().foods;

                for(var i = 0;i < foods.length;i ++){
                    var food = foods[i];
                    var $menuItem = $('.menu-item[menu-id='+food.menuId+']');
                    updateOperationRegion($menuItem,0);
                }

                cart.clear();
                $('.food-list-wrapper').hide();
                $repeatFoodItem.siblings().remove();
                updateCartMessage();
            });

            $('#cart').click(function(){
                var $foodListWrapper = $('.food-list-wrapper');
                if(cart.getCount() != 0 && !$foodListWrapper.is(":visible")){
                    showFoodList();
                }else{
                    $foodListWrapper.hide();
                    $repeatFoodItem.siblings('.food-item').remove();
                }
            });

            function showFoodList(){
                var foods = cart.getOrder().foods;
                for(var i = 0;i < foods.length;i ++){
                    var food = foods[i];
                    var $foodItem = cloneFoodItem();
                    $foodItem.attr('menu-id',food.menuId);
                    $foodItem.find('.food-name').text(food.name);
                    $foodItem.find('.price').text(food.price);
                    $foodItem.find('.count').text(food.count);
                    $foodItem.find('.minus').click(cartMinusClicked);
                    $foodItem.find('.add').click(cartAddClicked);

                    $repeatFoodItem.before($foodItem);
                }
                $('.food-list-wrapper').show();
            }

            function cartMinusClicked(){
                var menuId = $(this).parents('.food-item').attr('menu-id');
                var count = cart.minusItem(menuId);
                if(count == 0){
                    $(this).parents('.food-item').remove();
                }else{
                    $(this).siblings('.count').text(count);
                }

                if(cart.getCount() == 0){
                    $('.food-list-wrapper').hide();
                }

                updateCartMessage();
                var $menuItem = $('.menu-item[menu-id='+menuId+']');
                updateOperationRegion($menuItem,count);

            }

            function cartAddClicked(){
                var menuId = $(this).parents('.food-item').attr('menu-id');
                var count = cart.addItemById(menuId);
                $(this).siblings('.count').text(count);
                updateCartMessage();
                var $menuItem = $('.menu-item[menu-id='+menuId+']');
                updateOperationRegion($menuItem,count);
            }

            $('#book').click(function(){
                if(cart.getCount() == 0) return;

                cart.save();

                location.href = 'cart_preview.html';
            });

            function categoryClicked(){
                if(!$(this).hasClass('on')){
                    loadCategoryData($(this));
                }
            }


            function loadCategoryData($item){

                //remove menu-item
                $('#repeat-menu-item').siblings('.menu-item').remove();

                $item.siblings('.category-item.on').removeClass('on');
                $item.addClass('on');

                getMenus($item.attr('ctg-id'));
            }

            function getCategory(storeId){
                $.getJSON("/api/category/"+storeId,{},function(data,status,xhr){
                    var $list = $('.category');
                    $.each(data,function(index,item){
                        var $item = $('<li class="category-item"></li>');
                        $item.attr('ctg-id',item.id);
                        $item.text(item.name);
                        $item.click(categoryClicked);
                        $list.append($item);
                    });
                    loadCategoryData($('.category-item:first-child'));
                });
            }

            function getMenus(id){
                $.getJSON("/api/getmenu/category/" + id,{},function(data,status,xhr){
                    console.log(data);
                    $.each(data,function(key,item){
                        var $item = cloneMenuItem();
                        $item.attr('menu-id',item.id);
                        $item.attr('menu-name',item.name);
                        $item.attr('menu-price',item.unitPrice);
                        $item.find('.menu-name').text(item.name);
                        $item.find('.price').text(item.unitPrice);
                        $item.find('.add').click(add);
                        $item.find('.minus').click(minus);

                        var count = cart.getItemCount(item.id);
                        updateOperationRegion($item,count);

                        $repeatMenuItem.before($item);
                    });
                });
            }

            function updateOperationRegion($item,count){
                var $minus = $item.find('.minus');
                var $count = $item.find('.count');
                $count.text(count);
                if(count > 0){
                    $count.show();
                    $minus.show();
                }else{
                    $count.hide();
                    $minus.hide();
                }
            }

            var $repeatFoodItem = undefined;
            function cloneFoodItem(){
                if(!$repeatFoodItem){
                    $repeatFoodItem = $('#repeat-food-item');
                }

                var $item = $repeatFoodItem.clone();
                $item.attr('id',Date.now());
                $item.show();
                return $item;
            }

            var $repeatMenuItem = undefined;
            function cloneMenuItem(){
                if(!$repeatMenuItem){
                    $repeatMenuItem = $('#repeat-menu-item');
                }

                var $item = $repeatMenuItem.clone();
                $item.attr('id',Date.now());
                $item.show();
                return $item;
            }

            function minus() {
                var $parent = $(this).parents('.menu-item');
                var $count = $(this).siblings('.count');
                var id = $parent.attr('menu-id');
                var count = cart.minusItem(id);
                $count.text(count);
                updateCartMessage();
                if(count <= 0){
                    $count.hide();
                    $(this).hide();
                }
            }

            function add(){
                var $parent = $(this).parents('.menu-item');
                var id = $parent.attr('menu-id');
                var name = $parent.attr('menu-name');
                var price = $parent.attr('menu-price');
                $parent.attr('menu-price');
                var food = {
                    menuId : parseInt(id),
                    name : name,
                    price : parseFloat(price),
                    count : 1
                };

                var count = cart.addItem(food);
                updateCartMessage();
                console.log(cart);
                if(count > 0){
                    var $minus = $(this).siblings('.minus');
                    var $count = $(this).siblings('.count');
                    $count.text(count);
                    $minus.show();
                    $count.show();
                }
            }
        })();


    </script>
</div>